<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" type="shortcut icon" th:href="@{/img/favicon.ico}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">

    <link rel="stylesheet" type="text/css" th:href="@{/editor-md/examples/css/style.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/editor-md/css/editormd.css}"/>

    <title>Echo - 发布文章</title>
</head>

<body>
<div class="nk-container">

    <div id="layout">
        <header>
            <div class="form-group">
                <input type="text" class="form-control" style="font-size: 24px; font-weight: 500;"
                       id="recipient-name" placeholder="输入文章标题..." required>
            </div>
        </header>

        <div id="test-editormd">
                <textarea class="form-control" id="message-text" style="display:none;">

#### Welcome to Echo

> Examples

- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;
                </textarea>
        </div>

        <div style="text-align: center">
            <button type="button" class="btn btn-outline-secondary" id="backIndexBtn">返回首页</button>
            <button type="button" class="btn btn-outline-primary" id="publishBtn"
                    style="color: rgb(119, 84, 223)">发布文章
            </button>

        </div>

        <!-- 提示框 -->
        <div class="modal fade" id="hintModal" tabindex="-1" role="dialog" aria-labelledby="hintModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="hintModalLabel">提示</h5>
                    </div>
                    <div class="modal-body" id="hintBody">发帖成功</div>
                </div>
            </div>
        </div>

    </div>

</div>

<script th:src="@{/js/jquery-3.1.0.min.js}"></script>
<script th:src="@{/editor-md/editormd.min.js}"></script>

<script th:src="@{/js/popper.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/global.js}"></script>
<script th:src="@{/js/httpUtils.js}"></script>
<!--    <script th:src="@{/js/discuss-publish.js}"></script>-->

<script type="text/javascript">
    var testEditor;

    $(function () {

        $("#publishBtn").click(function () {

            // 1.获取数据
            var title = $("#recipient-name").val();
            var content = $("#message-text").val();

            // 2.封装
            var param = new Object();
            param.title = title;
            param.content = content;

            // 3.异步发送请求
            sendPost("post/create", param, function (resp) {

                $("#hintBody").text("发帖成功！");
                // 显示提示框
                $("#hintModal").modal("show");
                // 2s 后自动隐藏提示框
                setTimeout(function () {
                    $("#hintModal").modal("hide");
                    // 操作完成后，跳转到首页
                    location.href = baseUrl;
                }, 2000);
            })
        });


        testEditor = editormd("test-editormd", {
            width: "90%",
            height: 640,
            syncScrolling: "single",
            path: "../editor-md/lib/",
            saveHTMLToTextarea: true, // 这个配置，方便 post 提交表单

            /**上传图片相关配置如下*/
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: CONTEXT_PATH + "/discuss/uploadMdPic",// 后端上传图片的服务地址
            onload: function () {
                //console.log('onload', this);
                //this.fullscreen();
                //this.unwatch();
                //this.watch().fullscreen();

                //this.setMarkdown("#PHP");
                //this.width("100%");
                //this.height(480);
                //this.resize("100%", 640);
            }
        });

    });
</script>

</body>
</html>